<template></template>

<script setup>
import { useMap } from './useMap';
import { pick } from 'lodash-es';

defineOptions({
  name: 'DistrictSearch',
});

const instance = useMap();

const props = defineProps({
  subdistrict: {
    type: Number,
    default: 0,
  },
  extensions: {
    type: String,
    default: 'all',
  },
  level: {
    type: String,
    default: 'district',
  },
  view: {
    type: Boolean,
    default: true,
  },
  styles: {
    type: Object,
    default: () => ({}),
  },
  adcode: {
    type: String,
    default: undefined,
  },
});

let district;
let polygon;

const remove = () => {
  if (polygon && instance.$amapComponent) {
    if (instance.$amapComponent.getLayers().length) {
      instance.$amapComponent.remove(polygon);
    }
    polygon = null;
  }
};

const drawBounds = paths => {
  if (polygon && instance.$amapComponent?.remove) {
    instance.$amapComponent.remove(polygon);
    polygon = null;
  }
  for (var i = 0; i < paths.length; i += 1) {
    //构造MultiPolygon的path
    paths[i] = [paths[i]];
  }

  const _styles = Object.assign(
    {
      strokeWeight: 1,
      path: paths,
      fillOpacity: 0.25,
      fillColor: '#80d8ff',
      strokeColor: '#0091ea',
    },
    props.styles,
  );

  polygon = new AMap.Polygon(_styles);

  instance.$amapComponent.add(polygon);

  if (props.view) {
    instance.$amapComponent.setFitView(polygon);
  }
};

const queryDistrict = code => {
  const opts = {
    subdistrict: 0, //获取边界不需要返回下级行政区
    extensions: 'all', //返回行政区边界坐标组等具体信息
    level: 'district', //查询行政级别为 市
  };

  const options = Object.assign(opts, pick(props, ['subdistrict', 'extensions', 'level']));

  if (!district) {
    district = new AMap.DistrictSearch(options);
  }

  if (!code) return;
  district.search(code, (status, result) => {
    if (!result || !result.districtList || !result.districtList[0]) {
      console.warn('请正确填写名称或更新其他名称');
      return;
    }
    const bounds = result.districtList[0].boundaries;
    drawBounds(bounds);
  });
};

onBeforeUnmount(() => {
  remove();
});

watch(
  () => props.adcode,
  () => {
    queryDistrict(props.adcode);
  },
  { immediate: true },
);
</script>

<style scoped></style>
